<template>
	<div class="page">
		<div class="page-header">
			<div class="u-flex u-col-center">
				<image src="../../static/images/location.png" class="location_icon u-m-l-18 flex-shrink" alt="" />
				<u-tabs :list="tabsList" class="tabs" :is-scroll="false" bg-color="transparent" inactive-color="#fff"
					bar-height="3" font-size="35" bold active-color="#FFB159" :current="current"
					@change="handleTabsChange"></u-tabs>
				<picker v-if="current == 0" class="tabs_picker" mode="selector" :range="citys" range-key="city" @change="change_picker"></picker>
			</div>
		</div>
		<div class="page-content">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="handleScroll">
				<template v-if="listData && listData.length">
					<div class="item u-flex u-m-t-30" v-for="(item, index) in listData" :key="index"
						@click.stop="handleClick({ type: 'details', item: item })">
						<image :src="item.firstPic" class="item_img flex-shrink u-m-r-10" alt="" />
						<div class="item_right u-p-l-16 flex-1 u-p-b-30">
							<div class="u-flex u-row-between">
								<div class="u-flex u-col-center">
									<div class="name u-m-t-14">{{ item.nickname }}</div>
									<image src="../../static/images/star_vip.png" class="star_vip u-m-l-20" alt=""
										v-if="item.memberLevelId" />
								</div>
								<div class="status">{{ item.onlineStatus === 1 ? '在线' : '离线' }}</div>
							</div>
							<div class="u-flex u-m-t-18">
								<div class="tags u-flex u-col-center u-p-l-6"
									v-if="item.authTags && item.authTags.length">
									<image src="../../static/images/verify.png" class="icon" alt="" />
									<span class="u-m-l-6">真人认证</span>
								</div>
								<div class="tags u-flex u-col-center u-p-l-6 u-m-l-18"
									v-if="item.imgs && item.imgs.length">
									<img src="../../static/images/play.png" class="icon" alt="" />
									<span class="u-m-l-6">视频相册</span>
								</div>
							</div>
							<div class="flex u-m-t-15">
								<div class="msg_tags u-m-r-18" v-if="item.gender || item.age">
									{{ gender_msg[item.gender] }}{{ item.age ? '·' + item.age + '岁' : '' }}
								</div>
								<template v-if="item.tagsList && item.tagsList.length">
									<div class="msg_tags u-m-r-18" v-for="(item2, index2) in item.tagsList"
										:key="index2">
										{{ item2 }}
									</div>
								</template>
								<div class="msg_tags" v-if="item.distance">{{ item.distance }}km</div>
							</div>
						</div>
					</div>
				</template>
				<template v-else>
					<u-empty mode="list" class="u-empty"></u-empty>
				</template>
			</scroll-view>
		</div>
		<div class="page-footer">
			<customizeTabbar></customizeTabbar>
		</div>
		<u-no-network></u-no-network>
		<view-loading :loading="loadingSkeleton"></view-loading>
	</div>
</template>

<script>
	import customizeTabbar from '@/components/customizeTabbar'
	import {
		loadBMap
	} from '@/utils/getUserLocation'

	export default {
		name: '', // 页面名称
		components: {
			customizeTabbar
		}, // 挂载组件
		props: {}, // 组件传值
		data() {
			return {
				loadingSkeleton: false, // 页面等待
				tabsList: [{
						name: '宁波市',
						type: '1'
					},
					{
						name: '最近',
						type: '2'
					},
					{
						name: '新人',
						type: '3'
					},
				], // 顶部导航
				current: 0, //
				page: 1, // 当前页数
				per_page: 10, // 每页个数
				totalPages: 0, // 总页数（防止频繁上拉刷新）
				listData: [], // 数据列表
				contentHeight: '', // 列表滚动高度
				gender_msg: {
					0: '未知',
					1: '男',
					2: '女',
				}, // 性别
				citys:  this.$CityObj.cityObjs
			}
		},
		computed: {}, // 计算机属性 类似与data概念
		watch: {}, // 监控data中数据变化
		created() {
			this.$WebIM.conn.getContacts().then(rep => {
				console.log('getContacts ok',rep)
			}).catch(err => {
				console.log('getContacts err',err)
			});
			window.initBaiduMapScript = () => {
				console.log(BMap);
				this.getNowLocation()
			}
			loadBMap('initBaiduMapScript');
		}, // 生命周期-创建完成(可以访问当前this实例)
		mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
		methods: {
			send() {
				// 发送一条文本消息
				const option = {
					msg: "hello w!",
					to: "222",
					success: function(id, serverMsgId) {
						// 发送成功
						console.log('发送成功', serverMsgId, id)
					},
					fail: function(error) {
						// 发送失败
						console.log('发送失败', error)
					}
				}
				this.$WebIM.sendMessage(option)
			},
			// 页面点击事件
			handleClick(options) {
				const {
					type,
					item
				} = options
				switch (type) {
					case 'details':
						this.$jump({
							name: 'personal',
							query: {
								id: item.memberId,
								n:item.nickname

							}
						})
						break

					default:
						break
				}
			},
			// 获取位置
			getNowLocation() {
				var that = this;
				this.$nextTick(function() {
					try {
						const geolocation = new BMap.Geolocation();
						geolocation.getCurrentPosition(function(r) {
							var city = r.address.city;
							if (city) {
								console.log(city);
								that.tabsList[0].name = city;
							}
							that.$u.api.PostUpdateInfo({
								latitude:r.latitude,
								longitude:r.longitude
							}).then((res) => {
								console.log("获取到地址");
								console.log(res);
							})
							that.apiGetFetchMemberList();
							console.log(r.address.city);
						});
					} catch (e) {
						console.log(e)
					}
				})
			},
			// 切换顶部导航栏
			handleTabsChange(index) {
				this.current = index
				this.page = 1
				this.apiGetFetchMemberList()
			},
			// 列表滚动到底部
			handleScroll() {
				// console.log("123456789");
				// console.log(this.page);
				// console.log(this.totalPages);
				// if (this.page < this.totalPages) {
					this.page += 1
					this.apiGetFetchMemberList(true)
				// }
			},
			// 计算列表滚动高度
			getContentHight() {
				console.log('进入')
				this.$u.getRect('.page').then((res) => {
					console.log('进入page')
					const pageHeight = res.height
					this.$u.getRect('.page-header').then((res2) => {
						console.log('进入pagehearder')
						const pageHeaderHeight = res2.height
						this.$u.getRect('.page-footer').then((res3) => {
							console.log('进入pagefooter')
							const pageFooterHeight = res3.height
							const contentHeight = pageHeight - pageHeaderHeight -
								pageFooterHeight - 40
							this.contentHeight = 'height:' + contentHeight + 'px'
						})
					})
				})
			},
			// 获取用户信息
			apiGetInfo() {
				this.$u.api.info().then((res) => {
					this.userInfo = res.data
					uni.setStorageSync('phone', res.data.userName) // 用户手机号
					this.hasBank = Number(res.data.hasBank)
					this.hasIdcard = Number(res.data.hasIdcard)
					this.hasContact = Number(res.data.hasContact)
					this.isBqsAuthentication = Number(res.data.isBqsAuthentication)
					uni.setStorageSync('userInfo', res.data) // 用户信息
					this.loadingSkeleton = false
				})
			},
			// 获取用户列表
			apiGetFetchMemberList(isRechBottom) {
				const params = {
					type: this.current,
					pageNum: this.page,
					pageSize: this.per_page,
				}
				if (this.current === 0) {
					params.area = this.tabsList[0].name
				}
				 this.$showLoading('加载中...')
				this.$u.api.GetFetchMemberList(params).then((res) => {
					const {
						data
					} = res
					data.forEach((item) => {
						const tagsList = item.tags ? item.tags.split(',') : []
						item.tagsList = tagsList
					})
					if (isRechBottom) {
						this.listData = this.listData.concat(data)
						return
					}
					this.listData = data
					// this.totalPages = Math.ceil(total / this.per_page)
				}).finally(() => {
				  uni.hideLoading()
				})
			},
			change_picker: function(e) {
				console.log(e);
				this.tabsList[0].name = this.citys[e.detail.value].city;
				this.apiGetFetchMemberList();
				this.page = 1;
			}
		}, // 挂载一些方法
		onReachBottom() {
			this.handleScroll();
		},
		onLoad(options) {
			// APP.vue 或者其他组件内
			this.getContentHight()
			console.log('onLoad', options, Date.now())
		}, // 生命周期回调—监听页面加载
		onShow() {}, // 生命周期回调—监听页面显示
		onReady() {}, // 生命周期回调—监听页面初次渲染完成
		onHide() {}, // 生命周期回调—监听页面隐藏
		onUnload() {}, // 生命周期回调—监听页面卸载
	}
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
		width: 100%;
		height: 100vh;
		background-size: cover;
		background-repeat: no-repeat;
		padding: 36rpx 30rpx 0;
	}

	.page-header,
	.page-content {
		background: transparent;
	}

	.location_icon {
		width: 34rpx;
		height: 36rpx;
	}

	.tabs {
		width: 60%;
	}

	.item {
		height: 304rpx;
		align-items: flex-start;
	}

	.item_img {
		width: 180rpx;
		height: 271rpx;
		background: #ffffff;
		opacity: 0.9;
		border-radius: 15rpx;
	}

	.item_right {
		height: 100%;
		border-bottom: 1rpx solid rgba($color: #fff, $alpha: 0.2);

		.name {
			font-size: 31rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #ffffff;
		}

		.status {
			width: 70rpx;
			height: 35rpx;
			background: #d7443e;
			border-radius: 18rpx;
			font-size: 21rpx;
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			line-height: 35rpx;
		}
	}

	.tags {
		width: 140rpx;
		height: 35rpx;
		background: linear-gradient(0deg, #e2c43e, #fea700);
		border-radius: 3rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #4137ce;
	}

	.icon {
		width: 24rpx;
		height: 24rpx;
	}

	.msg_tags {
		padding: 7rpx 14rpx;
		box-sizing: border-box;
		height: 35rpx;
		background: rgba($color: #000000, $alpha: 0.3);
		border-radius: 3rpx;
		text-align: center;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
		line-height: 21rpx;
		margin-bottom: 15rpx;
	}

	.star_vip {
		width: 39rpx;
		height: 35rpx;
	}

	.u-flex {
		position: relative;
	}

	.tabs_picker {
		position: absolute;
		width: 130rpx;
		height: 100%;
		top: 0;
		left: 60rpx;
	}
</style>
